<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <div class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8"/>
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                    <!-- <router-view></router-view> -->
                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <div class="box-class">
                            <!-- 左边 -->
                            <div class="box-class1">
                                <dv-border-box-12>
                                    <div class="dashboard">
                                        <!-- 第一行卡片 -->
                                        <div class="card bg-blue">
                                            <span class="label">累计交易量</span>
                                            <span class="value">9999</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">累计交易金额（元）</span>
                                            <span class="value">9999.99</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">累计节约金额（元）</span>
                                            <span class="value">199.01</span>
                                        </div>

                                        <!-- 第二行卡片 -->
                                        <div class="card bg-blue">
                                            <span class="label">节约率</span>
                                            <span class="value">9.99%</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">增值金额（元）</span>
                                            <span class="value">39.99</span>
                                        </div>
                                        <div class="card bg-blue">
                                            <span class="label">增值率</span>
                                            <span class="value">19.01%</span>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                                <dv-border-box-12>
                                    <div class="panel-group">
                                        <!-- 土地使用权出让板块 -->
                                        <div class="panel">
                                            <div class="panel-header">土地使用权出让</div>
                                            <div class="panel-body">
                                                <div class="card">
                                                    <span class="label">成交总数（项）</span>
                                                    <span class="value">233</span>
                                                </div>
                                                <div class="card">
                                                    <span class="label">成交金额（亿元）</span>
                                                    <span class="value">199.11</span>
                                                </div>
                                                <div class="card">
                                                    <span class="label">成交面积（万方）</span>
                                                    <span class="value">12345.67</span>
                                                </div>
                                                <div class="card">
                                                    <span class="label">溢价率</span>
                                                    <span class="value">3.99%</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 矿产权出让板块 -->
                                        <div class="panel">
                                            <div class="panel-header">矿产权出让</div>
                                            <div class="panel-body">
                                                <div class="card">
                                                    <span class="label">成交金额（万元）</span>
                                                    <span class="value">789.11</span>
                                                </div>
                                                <div class="card">
                                                    <span class="label">成交次数（宗）</span>
                                                    <span class="value">123</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                                <dv-border-box-12>
                                    <div class="ring-chart-container">
                                        <!-- 图表容器（水平排列） -->
                                        <div class="charts-row">
                                            <!-- 成交金额占比环形图 -->
                                            <div class="chart-item">
                                                <div class="chart-title">成交金额占比</div>
                                                <dv-active-ring-chart :config="amountConfig"
                                                    style="width: 300px; height: 300px" />
                                            </div>

                                            <!-- 出让面积占比环形图 -->
                                            <div class="chart-item">
                                                <div class="chart-title">出让面积占比</div>
                                                <dv-active-ring-chart :config="areaConfig"
                                                    style="width: 300px; height: 300px" />
                                            </div>
                                        </div>

                                        <!-- 共用图例 -->
                                        <div class="legend">
                                            <div class="legend-item" v-for="(item, index) in legendData" :key="index">
                                                <span class="legend-dot"
                                                    :style="{ backgroundColor: item.color }"></span>
                                                <span>{{ item.name }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <!-- 中间 -->
                            <div class="box-x">
                                <dv-border-box-1 style="margin-left: 10px;">
                                    <div style="display: flex;justify-content: space-around;width: 95%;">
                                        <div style="margin-top: 30px;">
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px; margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">信用指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">2455</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">景象指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">2579</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">活跃指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">-100</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">效能指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">2588</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                        </div>
                                        <div style="margin-top: 30px;">
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">公平指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">3688</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">民企指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">-500</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">风险指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">1799</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                            <div
                                                style="width: 200px; height:100px;margin-left: 30px;padding-top: 40px;margin-bottom: 20px;">
                                                <dv-border-box-8 style="width: 100%;height:100px">
                                                    <div
                                                        style="align-items: center;width: 100%;height:100%;display: flex; justify-content: center; flex-direction: column">
                                                        <p style="font-size: 20px;">肩负指数</p>
                                                        <p style="font-size: 30px;color: #32e9b3;">3489</p>
                                                    </div>
                                                </dv-border-box-8>
                                            </div>
                                        </div>
                                    </div>

                                </dv-border-box-1>
                            </div>
                            <!-- 右边 -->
                            <div class="box-s">
                                <div style="width: 100%;height:500px;">
                                    <dv-border-box-10>
                                        <div style="padding-top: 20px; padding-left: 100px;display: flex;">
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-13>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span>采购金额(亿元)</span>
                                                        <span color="#ffffff" style="margin-left: 15px;">123.45</span>
                                                    </div>
                                                </dv-border-box-13>
                                            </div>
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-13>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span>采购数量(宗)</span>
                                                        <span color="#ffffff" style="margin-left: 20px;">12345</span>
                                                    </div>
                                                </dv-border-box-13>
                                            </div>
                                        </div>
                                        <div style="padding-top: 20px; padding-left: 100px;display: flex;">
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-13>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span>节约金额(亿元)</span>
                                                        <span color="#ffffff" style="margin-left: 15px;">23.45</span>
                                                    </div>
                                                </dv-border-box-13>
                                            </div>
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-13>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span>节约率</span>
                                                        <span color="#ffffff" style="margin-left: 65px;">12.34%</span>
                                                    </div>
                                                </dv-border-box-13>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="panel-group">
                                                <!-- 土地使用权出让板块 -->
                                                <div class="panel">
                                                    <div class="panel-header">公开招标</div>
                                                    <div class="panel-body">
                                                        <div class="card">
                                                            <span class="label">成交量（宗）</span>
                                                            <span class="value">789</span>
                                                        </div>
                                                        <div class="card">
                                                            <span class="label">成交金额（亿元）</span>
                                                            <span class="value">78.1</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="panel">
                                                    <div class="panel-header">竞争性谈判</div>
                                                    <div class="panel-body">
                                                        <div class="card">
                                                            <span class="label">成交量（宗）</span>
                                                            <span class="value">789.11</span>
                                                        </div>
                                                        <div class="card">
                                                            <span class="label">成交金额（亿元）</span>
                                                            <span class="value">8.11</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-bottom: 100px;">
                                            <div class="panel-group">
                                                <!-- 土地使用权出让板块 -->
                                                <div class="panel">
                                                    <div class="panel-header">询价</div>
                                                    <div class="panel-body">
                                                        <div class="card">
                                                            <span class="label">成交量（宗）</span>
                                                            <span class="value">78</span>
                                                        </div>
                                                        <div class="card">
                                                            <span class="label">成交金额（亿元）</span>
                                                            <span class="value">2.11</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="panel">
                                                    <div class="panel-header">邀请招标</div>
                                                    <div class="panel-body">
                                                        <div class="card">
                                                            <span class="label">成交量（宗）</span>
                                                            <span class="value">34</span>
                                                        </div>
                                                        <div class="card">
                                                            <span class="label">成交金额（亿元）</span>
                                                            <span class="value">7.19</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </dv-border-box-10>
                                </div>
                                <div style="width: 100%;height:400px;margin-top: 20px;">
                                    <dv-border-box-10>
                                        <div style="padding-top: 20px; display: flex;">
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-12>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span style="margin-left: 60px;">项目数量</span>
                                                    </div>
                                                </dv-border-box-12>
                                            </div>
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-12 backgroundColor="#07141f">
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span style="margin-left: 60px;">成交数量</span>
                                                    </div>
                                                </dv-border-box-12>
                                            </div>
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-12>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span style="margin-left: 60px;">成交金额</span>
                                                    </div>
                                                </dv-border-box-12>
                                            </div>
                                        </div>
                                        <div style="padding-top: 20px; display: flex;">
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-12>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span style="margin-left: 60px;">节约金额</span>
                                                    </div>
                                                </dv-border-box-12>
                                            </div>
                                            <div style="width: 200px;height:50px;">
                                                <dv-border-box-12>
                                                    <div style="padding-top: 15px;padding-left: 10px;">
                                                        <span style="margin-left: 60px;">节约率</span>
                                                    </div>
                                                </dv-border-box-12>
                                            </div>
                                        </div>
                                        <div
                                            style="width: 500px;height:200px;margin-top: 20px;" id="aaa">

                                        </div>
                                    </dv-border-box-10>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import * as echarts from 'echarts';
import { useRouter } from 'vue-router'

export default defineComponent({

    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const legendData = [
            { name: '住宅用地', color: '#36CFC9' },
            { name: '商业用地', color: '#00C0FA' },
            { name: '工业用地', color: '#F53F3F' },
            { name: '其他用地', color: '#FFAA00' }
        ];

        // 成交金额占比配置
        const amountConfig = ref({
            data: [
                { name: '住宅用地', value: 35 },
                { name: '商业用地', value: 35 },
                { name: '工业用地', value: 15 },
                { name: '其他用地', value: 15 }
            ],
            radius: 0.7,
            activeRadius: 0.8,
            angle: 180,
            color: legendData.map(item => item.color),
            label: {
                show: true,
                formatter: (item) => `${item.name}\n${item.value}%`
            },
            activeAnimation: true
        });

        // 出让面积占比配置
        const areaConfig = ref({
            data: [
                { name: '住宅用地', value: 40 },
                { name: '商业用地', value: 25 },
                { name: '工业用地', value: 20 },
                { name: '其他用地', value: 15 }
            ],
            radius: 0.7,
            activeRadius: 0.8,
            angle: 180,
            color: legendData.map(item => item.color),
            label: {
                show: true,
                formatter: (item) => `${item.name}\n${item.value}%`
            },
            activeAnimation: true
        });

        const values = {
            累计交易量: 9999,
            累计交易金额: 9999.99,
            累计节约金额: 199.01,
            节约率: "9.99%",
            增值金额: 39.99,
            增值率: "19.01%"
        };

        // 定时更新数据（模拟实时效果）
        setInterval(() => {
            for (const key in values) {
                const el = document.querySelector(`.label:contains('${key}')`).nextElementSibling;
                if (el) {
                    // 数值型数据模拟增长
                    if (!key.includes("%")) {
                        const num = parseFloat(values[key]);
                        el.textContent = (num + Math.random() * 10).toFixed(2);
                    }
                }
            }
        }, 5000);

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()

            setTimeout(() => {
                var ROOT_PATH = 'https://echarts.apache.org/examples';

                var chartDom = document.getElementById('aaa');
                var myChart = echarts.init(chartDom);
                var option;

                const weatherIcons = {
                    Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
                    Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
                    Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
                };
                option = {
                    title: {
                        text: 'Weather Statistics',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: [
                                {
                                    value: 1548,
                                    name: 'CityE',
                                    label: {
                                        formatter: [
                                            '{title|{b}}{abg|}',
                                            '  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
                                            '{hr|}',
                                            '  {Sunny|}{value|202}{rate|55.3%}',
                                            '  {Cloudy|}{value|142}{rate|38.9%}',
                                            '  {Showers|}{value|21}{rate|5.8%}'
                                        ].join('\n'),
                                        backgroundColor: '#eee',
                                        borderColor: '#777',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        rich: {
                                            title: {
                                                color: '#ccc',
                                                align: 'center'
                                            },
                                            abg: {
                                                backgroundColor: '#333',
                                                width: '100%',
                                                align: 'right',
                                                height: 25,
                                                borderRadius: [4, 4, 0, 0]
                                            },
                                            Sunny: {
                                                height: 30,
                                                align: 'left',
                                                backgroundColor: {
                                                    image: weatherIcons.Sunny
                                                }
                                            },
                                            Cloudy: {
                                                height: 30,
                                                align: 'left',
                                                backgroundColor: {
                                                    image: weatherIcons.Cloudy
                                                }
                                            },
                                            Showers: {
                                                height: 30,
                                                align: 'left',
                                                backgroundColor: {
                                                    image: weatherIcons.Showers
                                                }
                                            },
                                            weatherHead: {
                                                color: '#333',
                                                height: 24,
                                                align: 'left'
                                            },
                                            hr: {
                                                borderColor: '#777',
                                                width: '100%',
                                                borderWidth: 0.5,
                                                height: 0
                                            },
                                            value: {
                                                width: 20,
                                                padding: [0, 20, 0, 30],
                                                align: 'left'
                                            },
                                            valueHead: {
                                                color: '#333',
                                                width: 20,
                                                padding: [0, 20, 0, 30],
                                                align: 'center'
                                            },
                                            rate: {
                                                width: 40,
                                                align: 'right',
                                                padding: [0, 10, 0, 0]
                                            },
                                            rateHead: {
                                                color: '#333',
                                                width: 40,
                                                align: 'center',
                                                padding: [0, 10, 0, 0]
                                            }
                                        }
                                    }
                                },
                                { value: 735, name: 'CityC' },
                                { value: 510, name: 'CityD' },
                                { value: 434, name: 'CityB' },
                                { value: 335, name: 'CityA' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);

        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.box-class {
    width: 100%;
    height: 300px;
    margin-top: 10px;
    display: flex;

    .box-class1 {
        width: 600px;
        height: 300px;
    }
}

/* 大屏容器 */
.dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;

    /* 背景色 */
}

/* 卡片样式 */
.card {
    background-color: #1a2c4e;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* 左侧高亮条 */
.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #00c9ff, #92fe9d);
    /* 渐变高亮 */
}

/* 标签与数值样式 */
.label {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
    display: block;
}

.value {
    font-size: 24px;
    font-weight: bold;
}

.dashboard {
    padding-top: 70px;
}

.panel-group {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.panel {
    flex: 1;
}

/* 板块头部 */
.panel-header {
    background: linear-gradient(to right, #00a8e8, #007ea7);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
}

/* 数据卡片容器 */
.panel-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background-color: #1a2c4e;
    padding: 10px;
    border-radius: 0 0 4px 4px;
}

/* 数据卡片样式 */
.card {
    background-color: #0f1c32;
    border-radius: 4px;
    padding: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 6px;
    display: block;
}

.value {
    font-size: 18px;
    font-weight: bold;
    color: #00c9ff;
    /* 数值高亮色 */
}

.panel-group {
    padding-top: 50px;
}

.ring-chart-container {
    padding: 20px;
    color: #fff;
}

/* 关键：设置两个图表水平排列 */
.charts-row {
    display: flex;
    gap: 50px;
    /* 两个图表之间的间距 */
    justify-content: center;
    /* 水平居中 */
    margin-bottom: 30px;
    /* 与图例的间距 */
}

.chart-item {
    text-align: center;
}

.chart-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
}

.legend {
    display: flex;
    gap: 25px;
    justify-content: center;
    /* 图例水平居中 */
    margin-top: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.box-x {
    width: 600px;
    height: 600px;
    margin-left: 20px;
    margin-top: 150px;
}

.box-s {
    width: 600px;
    height: 900px;
    margin-left: 40px;
}
</style>
